<template>
	<view class="wrap">
		<view class="logo">
			<image src="https://ya30images.hbwlife.com/wxmp/logo-yongan30.png" mode=""></image>
		</view>
		<view class="btn-wrap">
			<button class="add-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">绑定手机号</button>
		</view>
		<view class="tips">
			<view class="tip-content">
				<view class="toggle-check" @click="handleToggle" :class="[active ? 'toggle-active' :'' ]">
					<u-icon v-show="active" name="checkbox-mark" color="#fff"></u-icon>
				</view>
				<view class="tip-data">
					已阅读并同意以下协议:<text class="txt">《用户协议》</text>和<text class="txt">《隐私协议》</text>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		request,
		requestData
	} from '../../utils/http.js';
	export default {
		data() {
			return {
				active: true
			}
		},
		methods: {
			//手机号
			onGetPhoneNumber(e) {
				if (!this.active) {
					uni.$u.toast("请先同意协议")
					return
				}
				const {
					detail: {
						encryptedData,
						iv,
						code
					}
				} = e;
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					let open_id = uni.getStorageSync('open_id');
					let access_token = uni.getStorageSync('access_token');
					//console.log("当前code:", code)
					request("/wxaccess/mp/user/getPhoneNumber", {
						"wxphone_code": code,
						"open_id": open_id
					}).then(res => {
						console.log("数据：", res)
						uni.setStorageSync('open_id', res?.datas?.open_id || '');
						uni.setStorageSync('user_id', res?.datas?.user_id || '');
						uni.setStorageSync('access_token', res?.datas?.access_token || '');
						uni.setStorageSync('mobile_binded', res?.datas?.mobile_binded || 0);
						uni.setStorageSync('mobile', res?.datas.mobile || '');
					}).catch(err => {
						uni.showToast({
							title: err,
							duration: 2000,
							icon: "none"
						});
					})
				} else {
					uni.showToast({
						title: '为了给您提供更好的服务，请同意获取手机号！',
						duration: 2000,
						icon: "none"
					});
				}
			},

			handleToggle() {
				this.active = !this.active
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: #fff;
		font-size: 32rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
	}

	.logo {
		width: 360rpx;
		height: 360rpx;
		margin-top: 20%;

		image {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%
		}
	}

	.btn-wrap {
		padding: 80rpx;
		width: 80%;

		/deep/ .u-button--primary {
			border: none !important;
			// background: linear-gradient(to right, #d5ad57, #cfb58a);
			background-color: $global-color-golden;
		}
	}

	.add-btn {
		border: none;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $global-color-golden;
		border-radius: 40rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 400;
	}

	.tips {
		width: 90%;
		font-family: 28rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;

		.txt {
			color: $global-color-golden;
		}
	}

	.tip-content {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.toggle-check {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		border: 1px solid #d6d6d6;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.toggle-active {
		background-color: $global-color-golden;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		border: 1px solid $global-color-golden;
	}

	.tip-data {
		flex: 1;
	}
</style>